<template>
    <el-dialog :model-value="props.value" title="选择资产属性" width="1000px" @closed="props.closed">
        <DataGrid
            :auto-load="autoLoad"
            show-selection
            @selection-change="val => (selectedList = val)"
            :pagination="false"
            max-height="400"
        >
            <template #toolbar-search>
                <el-form :model="queryData" inline class="compact">
                    <el-form-item>
                        <el-input v-model="queryData.keyword" placeholder="属性名称/标识符/描述" clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="queryData.required" placeholder="是否必填" clearable>
                            <el-option label="是" :value="true" />
                            <el-option label="否" :value="false" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </template>

            <el-table-column label="序号" prop="id" width="80" />
            <el-table-column label="属性名称" prop="displayName">
                <template #default="{ row }">
                    <el-link type="primary" :underline="false" @click="onViewItem(row)">{{ row.displayName }}</el-link>
                </template>
            </el-table-column>
            <el-table-column label="标识符" prop="attributeName" />
            <el-table-column label="是否必填">
                <template #default="{ row }">
                    {{ row.required ? '是' : '否' }}
                </template>
            </el-table-column>
            <el-table-column label="数据类型" prop="typeName">
                <template #default="{ row }">
                    {{ attributeTypeList?.[row.typeName]?.displayName || 'N/A' }}
                </template>
            </el-table-column>
            <el-table-column label="默认值" prop="defaultValue" />
            <el-table-column label="描述" prop="description" />
        </DataGrid>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="props.close">取消</el-button>
                <el-button type="primary" @click="run" :loading="loading" :disabled="selectedList.length === 0">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { type PopupBoxProps } from '@great/utils';
import { modelService } from '@great/services';
import { useRequest } from 'vue-request';
import { type AutoLoadConfig, DataGrid } from '@great/components';

interface IProps extends PopupBoxProps {
    objectName: string;
    attributeTypeList: Record<string, any>;
    callback?: () => void;
}

const props = defineProps<IProps>();
const selectedList = ref<any[]>([]);

const queryData = ref({
    keyword: '',
    required: undefined
});

const autoLoad = reactive<AutoLoadConfig>({
    reloadDeps: [queryData],
    onLoad: async () => {
        const res = await modelService.attribute.getListByObjectName(props.objectName);
        return {
            data: res.data
                .filter(item => {
                    const keyword = queryData.value.keyword?.toLowerCase();
                    if (item.attributeType === 'SYSTEM' || item.inUsed) return false;
                    if (!keyword) return true;
                    return (
                        item.displayName.toLowerCase().indexOf(keyword) > -1 ||
                        item.attributeName.toLowerCase().indexOf(keyword) > -1 ||
                        item.description?.toLowerCase().indexOf(keyword) > -1
                    );
                })
                .filter(item => {
                    const required = queryData.value.required;
                    if (required === undefined) return true;
                    return item.required === required;
                })
        };
    }
});

const { run, loading } = useRequest(
    () => {
        return modelService.attribute.addExtends({
            objectName: props.objectName,
            attributeNames: selectedList.value.map(item => item.attributeName)
        });
    },
    {
        manual: true,
        onSuccess() {
            props.close();
            props.callback?.();
        }
    }
);

function onViewItem(row: any) {
    // showPopupBox(AttributeFormModal, {
    //     readOnly: true,
    //     detail: row
    // });
}
</script>

<style lang="scss" scoped></style>
